<template>
  <div>
    <el-dialog
      title="红包"
      :append-to-body="true"
      @close="closeDio"
      :visible.sync="dialogTableVisible"
      width="800px"
      style="padding: 20px"
    >
      <el-table
        ref="multipleTable"
        :data="list.data"
        stripe
        header-row-class-name="head_color"
        tooltip-effect="dark"
        style="width: 99.9%"
      >
        <el-table-column label="红包信息" min-width="140">
          <template slot-scope="scope">
            <div class="user_table">
              <span>名称：</span>
              <small>{{ scope.row.title }}</small>
              <br />
              <span>金额：</span>
              <small>{{ scope.row.money | keepTwoNum }}</small>
              <br />
              <span>积分/余额兑换：</span>
              <small>{{ scope.row.jf_change }}</small>
              <br />
              <span>累计消费满：</span>
              <small>{{ scope.row.cdn_xfm }}元可使用</small>
              <br />
            </div>
          </template>
        </el-table-column>

        <el-table-column label min-width="100">
          <template slot-scope="scope">
            <div class="user_table">
              <span>红包类型：</span>
              <small>{{
                scope.row.types == 1
                  ? "代驾红包"
                  : scope.row.types == 2
                  ? "权益红包"
                  : "商城红包"
              }}</small>
              <br />
              <span>领取类型：</span>
              <small>{{
                scope.row.pay_types == 1
                  ? "需积分可兑换"
                  : scope.row.pay_types == 2
                  ? "需余额可兑换"
                  : "普通红包"
              }}</small>
              <br />
              <span>是否免费领取：</span>
              <small>{{ scope.row.page_get == 1 ? "否" : "是" }}</small>
            </div>
          </template>
        </el-table-column>

        <el-table-column label min-width="100">
          <template slot-scope="scope">
            <div class="user_table">
              <span>每人限量：</span>
              <small>{{ scope.row.limit_num }}</small>
              <br />
              <span>发布总数：</span>
              <small>{{ scope.row.full_num }}</small>
              <br />
              <span>已领取数:</span>
              <small>{{ scope.row.receive_num }}</small>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作" min-width="80">
          <template slot-scope="scope">
            <el-row class="myblank">
              <el-button
                :loading="$store.state.isLoading"
                size="mini"
                @click="addShops(scope.row)"
                type="primary"
                >添加</el-button
              >
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-col :span="24" class="table_bottom">
          <el-col :span="24" class="tr">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage1"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="list.all_num"
            ></el-pagination>
          </el-col>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "xzuser",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    showType: {
      type: String,
      default: "table",
    },
    isAll: {
      type: Boolean,
      default: false,
    },
    isPart: {
      type: Boolean,
      default: false,
    },
    types: {
      type: [Number, String],
      default: "",
    },
  },
  data() {
    return {
      list: [],
      currentPage1: 1,
      pageSize: 10,
      dialogTableVisible: this.show,
      loading: false,
      searchAll: {},
      multipleSelection: "",
    };
  },
  methods: {
    getSearch(obj) {
      this.loading = true;
      this.searchAll.nickname = obj.title;
      this.getNewsAll(this.searchAll);
    },
    getNewsAll(data) {
      this.loading = true;
      var params = {};
      if (data) {
        params = JSON.parse(JSON.stringify(data));
      }
      if (this.types) {
        params.types = this.types;
      }
      this.$api.getNews.getPacketList(params).then((res) => {
        if (res.data.code == 200) {
          this.list = res.data.result;
        }
        this.loading = false;
      });
      this.loading = false;
    },
    imgError(item) {
      if (!item) {
        return require("../../assets/img/default_head.png");
      }
      if (item.indexOf("http") >= 0) {
        return item;
      } else {
        return "/api/" + item;
      }
    },
    addShops(row) {
      this.$emit("sendShop", row);
      this.dialogTableVisible = false;
    },
    handleSizeChange(val) {
      var params = this.searchAll;
      params.page = "";
      params.page_size = val;
      this.getNewsAll(params);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      var params = this.searchAll;
      params.page = val;
      params.page_size = this.pageSize;
      this.getNewsAll(params);
    },
    closeDio() {
      this.$emit("isshow", false);
      this.dialogTableVisible = false;
    },
    handleSelectionChange(val) {
      //多选框赋值
      this.multipleSelection = val;
    },
    addParts() {
      this.$emit("sendShop", this.multipleSelection, "obj");
      this.dialogTableVisible = false;
    },
  },
  watch: {
    show(val1, val2) {
      if (val1 == val2) {
        return;
      }
      this.dialogTableVisible = val1;
      this.currentPage1 = 1;
    },
    dialogTableVisible(val1, val2) {
      if (val1 == val2) {
        return;
      }
      this.$emit("isshow", val1);
    },
  },

  created() {
    this.getNewsAll();
  },
};
</script>
<style lang="less" scoped>
.list_ul {
  // height: 610px;
  overflow: auto;
}
.list_card {
  padding: 15px;
  cursor: pointer;
}
.card_list {
  line-height: 2;
  padding: 5px 0 0 5px;
}
.price_card {
  color: red;
}
.image {
  height: 200px;
  max-width: none;
  max-height: none;
}
.sead {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
</style>
